import { Breadcrumb, Layout, Menu, ConfigProvider} from 'antd';
import styles from './index.module.less'
import { Outlet, useNavigate } from 'react-router-dom';
import getItems from './Item/index';
import { useEffect, useState } from 'react';
const { Header, Content, Sider } = Layout;

const Layouts = () => {
  const navigate = useNavigate()

  const [bcItems,setBcItems] = useState([])
  
  const menuItems = getItems()
  const handleClick = (e) => {
    const url = e.keyPath.reverse().join('/')
    navigate(url)
    setBcItems(e.keyPath.map(item => {
      return {
        title:item
      }
    }))
  }
  return (
    <Layout className={styles.layout_wrapper}>
      <Sider theme='light' width='210px' style={{background:'#304156'}}>
        <div>custom-title</div>
        <Menu theme='dark'  defaultSelectedKeys={['1']} mode="inline" items={menuItems} onClick={handleClick} style={{background:'#304156'}} />
      </Sider>

      <Content>
        <Layout>
          <Header style={{background:'#FFFFFF',padding:'0 0 0 0'}}>
            <ConfigProvider
            theme={{
              components: {
                Breadcrumb: {
                  // itemColor:'#FFFFFF',
                  // separatorColor: '#FFFFFF',
                  // lastItemColor:'#FF0000',
                  // iconFontSize: 18

                }
              }
            }}>
              <Breadcrumb
                style={{
                  margin: '16px 15px',
                }}

                items={bcItems}
              >          
              </Breadcrumb>
            </ConfigProvider>
            
          </Header>
          <Content>
            <Outlet></Outlet>
          </Content>
        </Layout>
      </Content>

    </Layout>
  )
}
export default Layouts
